<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美团</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="container">
    <header>
        <img src="../img/index/title.png" height="34" width="1350"/>
        <nav>
            <a class="banner" href="#">
                <img src="../img/index/美团外卖图标.png" height="38" width="47"/>
                <div class="right">
                    <p class="text-big">美团外卖</p>
                    <p class="text-small text-grey">美团外卖 送啥都快</p>
                </div>
            </a>
            <ul class="left">
                <li><a href="#">首页</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">入驻加盟</a></li>
            </ul>
            <div class="button-group left">
                <input class="left" type="text" placeholder="搜索商家,美食"/>
                <button class="left" type="button"><img src="../img/index/搜索框按钮图标.png" height="32" width="31"/></button>
            </div>
        </nav>
    </header>
    <div class="main-content">
        <div class="shop-category">
            <span class="left">
                <img src="../img/index/商家分类.jpg" height="22" width="23"/>
                商家分类
            </span>
            <ul class="left">
                <li><a href="#">全部</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">正餐优选</a></li>
                <li><a href="#">超市</a></li>
                <li><a href="#">精选小吃</a></li>
                <li><a href="#">鲜果购</a></li>
                <li><a href="#">下午茶</a></li>
            </ul>
        </div>
        <div class="item-list">
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/德克士.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/康师傅牛肉面.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/必胜客.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/长风源.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/朴素.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/新白鹿.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/老头儿.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="item-banner">
                    <img src="../img/index/汉堡王.png" height="127" width="169"/>
                </div>
                <div class="item-detail">
                    <p class="item-name">德克士 (新塘店)</p>
                    <p class="item-star">★★★★★4.6分</p>
                    <p>
                        <span class="item-cost text-grey">起送:￥20</span>
                        <span class="item-cover-cost text-grey">配送费￥4</span>
                    </p>
                    <p>
                        <span class="item-minutes text-grey">30分钟</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer"></div>

<script src="../js/jquery-3.2.1.js"></script>
<script>
    $(function () {
        var icon = $("<div class='icon'><img src='../img/index/爱心图标.png'></div>")
            .css({"position": "absolute", "right": "0", "top": "0"});
        $(".item")
            .mouseover(function () {
                $(this).css({"background-color": "rgb(245,245,245)"});
            })
            .mouseout(function () {
                $(this).css({"background-color": "#fff"})
            });

        $(".item .item-banner")
            .css({"position": "relative"})
            .mouseover(function () {
                $(this).append(icon);
            });
    });
</script>
</body>
</html>